<template>
  <div class="exportPage">
    <div class="discardInfo">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>店铺</span>
        </div>
        <el-tag type="info" @click="handleClickType(1)">订单表</el-tag>
        <el-tag type="info" @click="handleClickType(5)">货款明细</el-tag>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>成本</span>
        </div>
        <el-tag type="info" @click="handleClickType(3)">中转仓</el-tag>
        <el-tag type="info" @click="handleClickType(2)">中转运费</el-tag>
        <el-tag type="info" @click="handleClickType(4)">无中转</el-tag>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>推广</span>
        </div>
        <el-tag type="info" @click="handleClickType(6)">全站推广</el-tag>
        <el-tag type="info">标准推广</el-tag>
      </el-card>
    </div>
    <div class="exportPageContain">
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="导入类型" prop="type">
          <el-radio-group v-model="form.type" @change="handleChangeType">
            <el-radio-button
              v-for="item in uploadOptions"
              :key="item.value"
              :label="item.value">
              {{item.label}}
            </el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="店铺ID" prop="shopId" v-if="[1, 5, 6].includes(currentUploadOption.value)">
          <el-select
            v-model="form.shopId"
            placeholder="请选择"
            @change="handleChangeShop">
            <el-option
              v-for="item in shopOptions"
              :key="item.shopId"
              :label="item.shopName"
              :value="item.shopId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期" prop="date" v-if="[6].includes(currentUploadOption.value)">
          <el-date-picker
            v-model="form.date"
            type="date"
            :clearable="false"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            placeholder="选择日期"
            @change="handleChangeShop">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="是否支持更新" prop="updateSupport" v-if="[1, 3, 4, 6].includes(currentUploadOption.value)">
          <el-switch
            v-model="form.updateSupport"
            @change="handleChangeShop"
          ></el-switch>
        </el-form-item>
        <el-form-item label="文件">
          <el-upload
            :disabled="loading"
            :action="'http://111.230.34.115/prod-api' + currentUploadOption.action"
            :data="currentUploadOption.uploadParams"
            accept=".csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
            :on-success="handleUploadSuccess"
            :on-error="handleUploadError"
            :on-progress="handleUploadProgress"
            :show-file-list="true"
            :headers="headers">
            <el-button
              size="small"
              type="primary"
              :loading="loading">
              {{!loading ? "点击上传" : `上传中 ${loadProgress}%`}}
            </el-button>
          </el-upload>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import { getAllStoreManagement } from '@/api/order'
import moment from 'moment';
export default {
  data() {
    const currentDate = moment().subtract(1, 'days').format("yyyy-MM-DD");
    return {
      headers: {
        Authorization: "Bearer " + getToken(),
      },

      form: {
        type: 1,
        updateSupport: true,
        shopId: "",
        date: currentDate,
      },

      //店铺下拉数据
      shopOptions: [],

      //上传类型
      currentUploadOption: {},
      loadProgress: 0,
      loading: false,
    }
  },
  computed: {
    uploadOptions: function() {
      return [
        {
          label: "导入订单",
          value: 1,
          action: "/shop/import/orders",
          uploadParams: {
            updateSupport: this.form.updateSupport,
            shopId: this.form.shopId
          }
        },
        {
          label: "导入账户明细",
          value: 2,
          action: "/shop/import/accountDetails"
        },
        {
          label: "导入中转仓成本",
          value: 3,
          action: "/shop/import/transferCosts",
          uploadParams: {
            updateSupport: this.form.updateSupport,
          }
        },
        {
          label: "导入大秦拍单",
          value: 4,
          action: "/shop/import/daqinOrders",
          uploadParams: {
            updateSupport: this.form.updateSupport,
          }
        },
        {
          label: "导入货款明细",
          value: 5,
          action: "/shop/import/loanDetails",
          uploadParams: {
            shopId: this.form.shopId
          }
        },
        {
          label: "导入推广数据",
          value: 6,
          action: "/shop/import/productPromotion",
          uploadParams: {
            updateSupport: this.form.updateSupport,
            shopId: this.form.shopId,
            promotionDate: this.form.date
          }
        },
      ]
    }
  },
  mounted() {
    this.currentUploadOption = this.uploadOptions[0];
    this.getAllStoreManagementMethod();
  },
  methods: {
    getAllStoreManagementMethod() {
      getAllStoreManagement().then(res => {
        const { data } = res;
        this.shopOptions = data;
        this.form.shopId = data[0].shopId;
        this.currentUploadOption = this.uploadOptions.filter(item => item.value === this.form.type)[0]
      })
    },
    handleChangeType(v) {
      this.currentUploadOption = this.uploadOptions.filter(item => item.value === v)[0]
    },
    handleClickType(v) {
      this.form.type = v;
      this.handleChangeType(v)
    },
    handleChangeShop() {
      this.currentUploadOption = this.uploadOptions.filter(item => item.value === this.form.type)[0]
    },
    handleUploadSuccess(success) {
      const { msg, code } = success;
      if(code === 500) {
        this.$message.error(msg || "上传失败，请重试");
      }else {
        this.loading = false;
        this.loadProgress = 0;
        this.$message({
          message: '导入成功',
          type: 'success'
        });
      }
    },
    handleUploadError(error) {
      console.log(error)
    },
    handleUploadProgress(event, file, fileList) {
      const { percent } = event;
      this.loading = true; // 显示进度条
      this.loadProgress = percent.toFixed(2);
    },
  }
}
</script>
<style lang="scss" scoped>
div.exportPage {
  width: 100%;
  height: 100%;
  div.discardInfo {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    .el-card {
      width: 33%;
    }
    .el-tag {
      margin-right: 10px;
      cursor: pointer;
    }
  }
  div.exportPageContain {

  }
}
</style>
